<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 筛选状态与部门  -->
      <el-card>
        <el-form label-width="120px">
          <el-form-item label="部门:">
            <el-checkbox-group v-model="checkBoxDepts" @change="filterChange">
              <el-checkbox
                v-for="item in depts"
                :key="item.id"
                :label="item.name"
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="考勤状态：">
            <el-checkbox-group v-model="checkedStatu" @change="filterChange">
              <el-checkbox
                v-for="item in AttendanceEnum.holidayType"
                :key="item.id"
                :label="item.id"
              >
                {{ item.value }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import AttendanceEnum from '@/api/constant/attendance'
import { getDepartments } from '@/api/department'
export default {
  props: {
    allList: {
      type: Array,
      required: true
    }

  },
  data() {
    return {
      // 考勤状态枚举
      AttendanceEnum,
      // 所有部门信息
      depts: [],
      // 部门选中框
      checkBoxDepts: [],
      // 考勤状态选中框
      checkedStatu: []
    }
  },
  async  created() {
    //   获取公司部门信息
    const { depts } = await getDepartments()
    this.depts = depts
  },
  methods: {
    //  选择框发生改变时触发
    filterChange() {
      let res = ''
      if (this.checkBoxDepts.length === 0) {
        res = this.allList
      } else {
        res = this.allList.filter(user => {
        // 获取部门名
          const department = user.departmentName
          // 返回与部门选中框内相同部门的数据
          return this.checkBoxDepts.includes(department)
        })
      }

      //  上面是部门过滤
      //  下面是工作状态过滤
      //  工作状态的过滤要基于部门过滤的数据
      //  把部门过滤结果作为工作状态过滤的数据来源

      res = res.map(user => {
        return {
          ...user,
          attendanceRecord: this.converRecord(user.attendanceRecord)
        }
      })

      this.$emit('filterChange', res)
    },

    converRecord(oldRecord) {
    // 处理员工的考勤记录数据
    // oldRecord 有31天数据
      const res = oldRecord.map(item => {
      // 选择框当中是否有选中
        const noData = this.checkedStatu.length === 0
        const haveData = this.checkedStatu.includes(item.adtStatu.toString())

        return {
          ...item,
          // 遍历每天的数据, 如果存在考勤状态选中数据中就显示, 不然就显示空白
          // 如果没有选中任何值 || 如果当前记录值在选中数组中
          // 返回源数据
          // 否则返回 0
          adtStatu: noData || haveData ? item.adtStatu : 0
        }
      })
      return res
    }
  }

}
</script>

<style>

</style>
